<template>
  <div class="app-container">
	  
	  <div class='srf-card'>
	  	<div class="srf-top">
	  		<img class="icon" src="@/assets/rong/icon_house.png" alt="" />
	  		<div>{{Account.companyName}} (平台账户)</div>
	  	</div>
	  	<div class="srf-cont">
	  		<!-- <div class="srf-item">
	  			<div class="t">宝付支付账号：{{Account.htAccountNo}}</div>
	  			<div class="d">
	  				线下打款子账号：{{Account.accountNo}}
	  			</div>
	  		</div> -->
	  		<div class="srf-item ">
	  			<div class="price">
	  				总金额 {{Account.totalAmount}} 元
	  			</div>
	  		</div>
			<div class="srf-item ">
				<div class="price">
					可用金额 {{Account.aviAmount}} 元
				</div>
			</div>
			<div class="srf-item ">
				<div class="price">
					消费金额 {{Account.payAmount}} 元
				</div>
			</div>
			<div class="srf-item ">
				<div class="price">
					预扣金额 {{Account.freezAmount}} 元
				</div>
			</div>
	  		<div class="srf-item flex-center" >
	  			<div  @click="handleRecharge('bank')" class="tx">充值</div>
			</div>
	  	
	  	</div>
	  </div>
	  
	  
	  
	  
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" style="margin-top:20px;">
      <el-form-item label="类型：" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择类型：" clearable>
          <el-option
            v-for="dict in transaction_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
     
      <el-form-item label="业务id" prop="relationOrder">
        <el-input
          v-model="queryParams.relationOrder"
          placeholder="请输入关联业务id"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" style="width: 308px">
        <el-date-picker
          v-model="daterangeCreateTime"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

   
    <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商户名称" width="250" align="center" prop="companyName" :show-overflow-tooltip="true"/>
      <el-table-column label="类型" align="center" prop="type">
        <template #default="scope">
          <dict-tag :options="transaction_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" align="center" prop="amount" />
      <el-table-column label="余额" align="center" prop="currentAmount" />
      <el-table-column label="描述" align="center" prop="remark" />
      <el-table-column label="关联业务id" align="center" prop="relationOrder" />
	<el-table-column label="关联借款人" align="center" prop="relationName" />
	<el-table-column label="交易时间" align="center" prop="createTime" />
     <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:detail:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:detail:remove']">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="平台收款账户" v-model="open" width="600px" append-to-body>
    	<div class="dialog-custom">
    		<div class="dialog-main">
    			<el-form ref="bankRef" :inline="true" :model="Account"  label-width="140px">
    				<div class="dialog-item">
    					<div class="dialog-tbox">
    						<span>请在线下进行充值</span>
    					</div>
    					<div class="dialog-cont">
    					
    						<el-form-item class="v100" label="账户名称" prop="bankName">
    							{{Account.bankName}}
    						</el-form-item>
    						<el-form-item class="v100" label="开户行名称" prop="openBank">
								{{Account.openBank}}
    						</el-form-item>
    						<el-form-item class="v100" label="卡号" prop="cardNo">
								{{Account.cardNo}}
    						</el-form-item>
    						
    						
    					</div>
    				</div>
    			</el-form>
    		</div>
    	</div>
    	
    </el-dialog>
  
  </div>
</template>

<script setup name="Detail">
import { userListDetail } from "@/api/user/detail";
import { AccountInfo } from "@/api/user/account";

const { proxy } = getCurrentInstance();
const { transaction_type } = proxy.useDict('transaction_type');

const detailList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const daterangeCreateTime = ref([]);

const data = reactive({
	Account: {
		tenantId: null,
		companyName: null,
		aviAmount: null,
		totalAmount: null,
		payAmount: null,
		freezAmount: null,
		bankName: null,
		cardNo: null,
		openBank: null,
	},
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: null,
    amount: null,
    currentAmount: null,
    relationOrder: null,
    createTime: null,
  },
  rules: {
    userId: [
      { required: true, message: "用户Id不能为空", trigger: "blur" }
    ],
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules,Account } = toRefs(data);

function handleRecharge(type)
{
	open.value =true;
}

function getAccountInfo() {
    AccountInfo({}).then(response => {
        var data = response.data;
		Account.value=data
    });
}

/** 查询用户资金明细列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (null != daterangeCreateTime && '' != daterangeCreateTime) {
    queryParams.value.params["beginCreateTime"] = daterangeCreateTime.value[0];
    queryParams.value.params["endCreateTime"] = daterangeCreateTime.value[1];
  }
  userListDetail(queryParams.value).then(response => {
    detailList.value = response.data.list;
    total.value = Number(response.data.total);
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    userId: null,
    type: null,
    amount: null,
    currentAmount: null,
    remark: null,
    relationOrder: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("detailRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeCreateTime.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}


getAccountInfo();
getList();

</script>
<style scoped>
.app-container {
    background: #ffffff !important;
}

.srf-card {
		width: 100%;
		background: #FFFFFF;
		border: 1px solid #F5F5F5;
		box-shadow: 0px 4px 6px 0px rgba(10, 2, 4, 0.03);

		.srf-top {
			width: 100%;
			height: 38px;
			line-height: 38px;
			background: #FEF3EB;
			padding: 0 24px;
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 16px;
			font-weight: 550;

			.icon {
				width: 14px;
				height: 14px;
				display: block;
				margin-right: 16px;
			}
		}

		.srf-cont {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 56px;
			box-sizing: border-box;

			.srf-item {

				.t {
					color: #666666;
					font-size: 14px;
					line-height: 1;
				}

				.d {
					color: #989898;
					font-size: 12px;
					line-height: 1;
					margin-top: 10px;
				}

				.price {
					color: #666666;
					font-size: 12px;
				}

				.tx {
					cursor: pointer;
					line-height: 1;
					color: #FF6201;
					font-size: 12px;
					padding-right: 12px;
					position: relative;
					margin-right: 12px;

					&::after {
						content: '';
						width: 1px;
						height: 12px;
						background: #F5F5F5;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						z-index: 2;
					}
				}

				.sz {
					line-height: 1;
					color: #666666;
					font-size: 12px;

					.el-dropdown-link {
						color: #666666 !important;
						font-size: 12px;
					}
				}

				.status {
					.t {
						position: relative;
						color: #1FBD2E;
						font-size: 12px;
						padding-left: 12px;

						&::after {
							content: '';
							width: 5px;
							height: 5px;
							background: #2FBC3D;
							border-radius: 50%;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							z-index: 2;
						}
					}
				}
			}

		}

	}

</style>